<template>
  <div class="cars_list">
    <div class="top">
      <el-form :inline="true" class="demo-form-inline" :model="formInline">
        <el-form-item label="区域">
          <cityArea :cityAreaValue.sync="formInline.area"></cityArea>
        </el-form-item>
        <el-form-item label="类型">
          <el-select placeholder="请选择" v-model="formInline.type">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in type"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="禁启用">
          <el-select placeholder="请选择" v-model="formInline.status">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in status"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-select placeholder="请选择" v-model="search_key">
            <el-option label="停车场名称" value="parkingName"></el-option>
            <el-option label="详细区域" value="address"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入关键字" v-model="keyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="$router.push('/parkingAdd')"
            >新建停车场</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <tableData :config="table_config" ref="tableData">
        <!-- 禁启用 -->
        <template v-slot:status="slotData">
          <el-switch
            @change="switchChange(slotData.data)"
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="slotData.data.status"
          >
          </el-switch>
        </template>
        <!-- 查看位置 -->
        <template v-slot:lnglat="slotData">
          <el-button type="success" size="small" @click="showMap(slotData.data)"
            >查看位置
          </el-button>
        </template>
        <!-- 操作 -->
        <template v-slot:operation="slotData">
          <el-button type="warning" size="small" @click="edit(slotData.data.id)"
            >编辑
          </el-button>
          <el-button type="primary" size="small" @click="del(slotData.data.id)"
            >删除</el-button
          >
        </template>
      </tableData>
    </div>
    <showMapLocation
      :flagVisible.sync="map_show"
      :detailData="parking_data"
    ></showMapLocation>
  </div>
</template>

<script>
import showMapLocation from "@/components/dialog/showMapLocation";
import tableData from "@/components/tableData/index";
import { parkingEdit, parkingDelete, parkingList } from "@/request/parking";
import { requestUrl } from "@/request/requestUrl";
import { messageFun } from "@/utils/element";
import { addressInfo } from "@/utils/common";
let _this;
export default {
  data() {
    _this = this;
    return {
      // tableData 配置
      table_config: {
        thead: [
          { label: "停车场名称", prop: "parkingName" },
          {
            label: "类型",
            prop: "type",
            type: "function",
            callback: ({ row }, prop) => {
              return this.parking_type_json[row[prop]].label;
            },
          },
          {
            label: "区域",
            prop: "address",
            type: "function",
            callback: ({ row }, prop) => {
              return this.addressInfo(row[prop]);
            },
          },
          { label: "可停放车辆", prop: "carsNumber" },
          { label: "禁启用", prop: "status", type: "slot", slotName: "status" },
          {
            label: "查看位置",
            prop: "lnglat",
            type: "slot",
            slotName: "lnglat",
          },
          { label: "操作", type: "slot", slotName: "operation" },
        ],
        url: requestUrl.parkingList,
        data: {
          pageSize: 10,
          pageNumber: 1,
        },
      },
      formInline: {
        area: "",
        type: "",
        status: "",
      },
      parking_type_json: this.$store.state.config.parking_type_json,
      type: this.$store.state.config.parking_type,
      status: this.$store.state.config.parking_status,
      search_key: "",
      keyword: "",
      cityAreaValue: "",
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      currentPage4: 1,
      map_show: false,
      parking_data: {},
    };
  },
  created() {
    // this.parkingList();
  },
  components: {
    showMapLocation,
    tableData,
  },
  methods: {
    // 区域换行
    addressInfo(row) {
      let address = row;
      let addressInfo = "";
      if (address) {
        let splitAddress = address.split(",");
        addressInfo += splitAddress[0];
        if (splitAddress[1]) {
          addressInfo += `<br/>${splitAddress[1]}`;
        }
      }
      return addressInfo;
    },
    // 搜索
    search() {
      const reqData = {
        pageSize: 10,
        pageNumber: 1,
      };
      const filterData = JSON.parse(JSON.stringify(this.formInline));
      for (const key in filterData) {
        if (filterData[key]) {
          reqData[key] = filterData[key];
        }
      }
      if (this.search_key && this.keyword) {
        reqData[this.search_key] = this.keyword;
      }
      this.$refs.tableData.requestData(reqData);
    },
    async switchChange(slotData) {
      const { data } = await parkingEdit(slotData);
      if (data && data.resCode === 0) {
        messageFun(data.message, "success");
        this.$refs.tableData.requestData(reqData);
      } else {
        messageFun(data.message);
      }
    },
    showMap(row) {
      this.parking_data = row;
      this.map_show = true;
    },
    edit(id) {
      this.$router.push({
        path: "/parkingAdd",
        query: {
          id,
        },
      });
    },
    del(id) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.parkingDelete(id);
        })
        .catch((error) => {
          messageFun(error);
        });
    },
    async parkingDelete(id) {
      const { data } = await parkingDelete(id);
      if (data && data.resCode === 0) {
        messageFun(data.message, "success");
        // this.parkingList();
      } else {
        messageFun(data.message);
      }
    },
    // handleSizeChange(v) {
    //   this.pageSize = v;
    //   this.parkingList();
    // },
    // handleCurrentChange(v) {
    //   this.pageNumber = v;
    //   this.parkingList();
    // },
    // async parkingList() {
    //   const requestData = {
    //     pageNumber: this.pageNumber,
    //     pageSize: this.pageSize,
    //   };
    //   const filterData = JSON.parse(JSON.stringify(this.formInline));
    //   for (const key in filterData) {
    //     if (filterData[key]) {
    //       requestData[key] = filterData[key];
    //     }
    //   }
    //   if (this.search_key && this.keyword) {
    //     requestData[this.search_key] = this.keyword;
    //   }
    //   const { data } = await parkingList(requestData);
    //   if (data && data.resCode === 0) {
    //     this.tableData = data.data.data;
    //     this.total = data.data.total;
    //     console.log(data.data);
    //   } else {
    //     messageFun(data.data.message);
    //   }
    // },
  },

  // filters: {
  //   filterType(value) {
  //     const label = _this.type.filter((item) => item.value == value);
  //     if (label.length > 0) {
  //       return label[0].label;
  //     }
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.cars_list {
  width: 100%;
  height: 100%;
  .block {
    margin-top: 30px;
    text-align: right;
  }
}
</style>